<template>
  <h1>我是爷爷组件</h1>

  <!-- 子组件 -->
  <son-component></son-component>

  <div>
    <input v-model="a" placeholder="请输入"/>
    <button @click="handleAdd" type="button">添加</button>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import SonComponent from './SonComponent.vue'

const list = ref(['JavaScript', 'HTML', 'CSS'])
const a= ref('')
// 向子组件提供数据
provide('list', list.value)

// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(a.value)
  a.value = ''
}
</script>

<style lang="less">
</style>
